import React, { Component } from 'react'
/* 引入antd组件 */
import { List, InputItem, WhiteSpace, Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
/* 引入路由模块 */
// import { HashRouter as Router, Route, div, Link, Switch } from "react-router-dom"
/* 引入axios */
import axios from "axios"
/* 引入样式 */
import Regcss from "../scss/Login.module.scss"
export default class Login extends Component {
    state = {
        // num: 1
        phone: null,
        pass: null,
        code: null,
        isSend: false,
        timer: 60
    }
    /* 注册判断，调用axios */
    handleLogin = () => {
        if (this.state.phone) {
            var str = this.state.phone.split(' ').join('')
            axios.post("http://s.linweiqin.com/api/s/createUser", {
                mobile: str,
                username: str,
                password: this.state.pass,
                code: this.state.code
            }).then(res => {
                console.log(res);
                if (res.data.status === 0) {
                    this.props.history.push("/login")
                }
            })
        }

    }
    /* 手机号输入框 */
    onChange = (phone) => {
        if (phone.replace(/\s/g, '').length < 11) {
            this.setState({
                hasError: true,
            });
        } else {
            this.setState({
                hasError: false,
            });
        }
        this.setState({
            phone,
        });
    }
    /* 密码框 */
    Passchange = (val) => {
        this.setState({
            pass: val
        })
    }
    /* 验证码框 */
    Codechange = (val) => {
        this.setState({
            code: val
        })
    }
    /* 获取验证码 */
    getCode = (val) => {
        if (this.state.phone) {
            var str = this.state.phone.split(' ').join('')

            axios.post("http://s.linweiqin.com/api/s/getMobileCode", { mobile: str })
                .then(res => {
                    // console.log(res);
                    this.setState({
                        isSend: true
                    })
                })

        }
    }
    componentDidMount() {

    }
    render() {
        // const { getFieldProps } = this.props.form;
        return (
            <div className={Regcss.Reg}>
                <List renderHeader={() => '请输入手机号'} className={Regcss.regForm}>
                    <InputItem
                        type="phone"
                        placeholder="input your phone"
                        error={this.state.hasError}
                        onChange={this.onChange}
                        value={this.state.phone}
                        className={Regcss.regphone}
                    >手机号码</InputItem>

                    <InputItem
                        placeholder="验证码"
                        className={Regcss.regCode}
                        onChange={this.Codechange}
                    >验证码<span onClick={this.getCode} className={this.state.isSend ? Regcss.regSendcode : ''}>{this.state.isSend ? "重新获取" + this.state.timer + "S" : "获取验证码"}</span></InputItem>
                    <InputItem
                        // {...getFieldProps('password')}
                        type="password"
                        placeholder="****"
                        value={this.state.pass}
                        onChange={this.Passchange}
                        className={Regcss.regPass}
                    >密码</InputItem>
                    <Button type="primary" onClick={this.handleLogin} className={Regcss.regBtn}>注册</Button><WhiteSpace />

                </List>

            </div>
        )
    }
}
